<template>
	<view class="my-bg">
		<view class="pad-left-right-24">
			<view class="bg-white radius20 pad-40">
				<view class="font-36 font-w-500">缴费金额</view>
				<!-- <view class="mar-top-40">请用{{userInfo?.tel?.replace(/^(\d{3})\d{4}(\d{4})$/, '\$1****\$2')}}接收验证</view> -->
				<view class="form-box font-34">
					<up-form class="mar-top-30" labelWidth="200" labelPosition="top" :model="formData" :rules="rules"
						ref="ruleFrom">
						<!-- 账号 -->
						<up-form-item prop="login_secret" class="mar-top-40">
							<up-input disabled type="text" clearable placeholderClass="input-style" placeholder="请输入金额"
								v-model="formData.amount">
								<template #prefix>￥</template>
							</up-input>
						</up-form-item>

					<!-- 	<view v-if="info.balance < 0" class="betweenX font-28 mar-top-10">
							<view class="color-error"> 当前欠费金额{{info.balance}}元</view>
							<view class="color-primary" @click="hanldeRecharge">点击自动填入</view>
						</view> -->
					</up-form>
					<!-- <view class="betweenX mar-top-30 font-28">
						<view @click="hanldeMoney(100)" class="bg-color">100元</view>
						<view @click="hanldeMoney(150)" class="bg-color">150元</view>
						<view @click="hanldeMoney(200)" class="bg-color">200元</view>
					</view> -->
				</view>
				<view @click="hanldeCreateOrdert" class="button-style">确认缴费</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { waterDetail } from '@/api/index.js'
	import { waterMeterRecharge, payUnify } from '@/api/user.js';

	// 表单
	const formData = reactive({
		amount: ''
	});
	// 页面传参数据
	const param = ref({});
	// 详情数据
	const info = ref({});
	// 表单校验规则
	const rules = ref({
		amount: [{
			required: true,
			message: '请输入充值金额',
			trigger: 'blur'
		}]
	})
	
	const hanldeMoney = (e) =>{
		formData.amount = e;
	}

	// 点击自动填入金额
	const hanldeRecharge = () => {
		formData.amount = -info.value.balance;
	}

	// 获取详情数据
	const getWaterDetail = () => {
		waterDetail({ water_meter_id: param.value.id }).then(res => {
			if (res.code == 200) {
				info.value = res.data.info;
				formData.amount = -res.data.info.balance;
			}
		})
	}

	// 创建订单
	const hanldeCreateOrdert = () => {
		waterMeterRecharge({
			amount: formData.amount,
			water_meter_id: param.value.id,
		}).then(res => {
			payUnify({
				order_no: res.data.order_no,
				pay_plat: 30,
				openid: uni.getStorageSync('wxInfo').openid
			}).then(pay => {
				// #ifdef MP-WEIXIN
				let upay = pay.data.pay_data;
				let orderInfo = {
					package: upay.package, // 固定值
					nonceStr: upay.nonceStr, // 随机字符串
					timeStamp: upay.timeStamp, // 时间戳（单位：秒）
					signType: "RSA",
					paySign: upay.paySign, // 签名，这里用的 MD5 签名
				}

				uni.requestPayment({
					provider: "wxpay", //固定值为"wxpay"
					...orderInfo,
					success: function(res) {
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/userAdmin/userAdmin"
							})
						}, 1200)
					},
					fail: function(err) {
						console.log('支付失败:' + JSON.stringify(err));
					}
				});
				// #endif 
			})
		})
	}

	onLoad((option) => {
		param.value = option;
		getWaterDetail();
	})
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	.button-style {
		padding: 21rpx 0;
		text-align: center;
		margin-top: 82rpx;
	}

	.button-code {
		padding: 7rpx 10rpx;
		background: $uni-color-primary;
		color: white;
		border-radius: 4rpx;
	}

	.bg-color {
		background: #f2f2f2;
		padding: 15rpx 40rpx;
		border-radius: 5rpx;
	}
</style>